<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>组件测试</title>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/component.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	
	<script type="text/javascript" src="js/jquery-2.0.0.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/component.js"></script>
  </head>
  
  <body>
  <div id="main" align="center">
  	<div id="header">
  	
  	</div>
  	<div id="content">
  		<h1>BootStarp组件</h1>
  		<div id="glyphiconsDemo" class="content_div">
  			<fieldset>
  				<legend>Glyphicons图标使用</legend>
  				<div id="row1" class="row_div" align="left">
  					<blockquote>
  						<span>搜索(glyphicon-search)：</span><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp; 
  						<span>校正(glyphicon-adjust)：</span><span class="glyphicon glyphicon-adjust"></span>&nbsp;&nbsp; 
  						<span>书签(glyphicon-bookmark)：</span><span class="glyphicon glyphicon-bookmark"></span>&nbsp;&nbsp;
  					</blockquote>
  					<table class="table table-bordered">
  						<tr>
  							<td>none</td>
  							<td class="active">active</td>
  							<td class="success">success</td>
  							<td class="warning">warning</td>
  							<td class="danger">danger</td>
  						</tr>
  					</table>
  				</div>
				<div id="row2" class="row_div" align="left">
					<div id="row2_div">
					<ul id="row2_ul" class="list-unstyled">
  						<li>
  							<div class="row2_li_div" align="center">
  								<div class="glyphicon glyphicon-search"></div>
  								<div class="li_bottom">.glyphicon .glyphicon-search</div>
  							</div>
  						</li>
  						<li>
  							<div class="row2_li_div" align="center">
  								<div class="glyphicon glyphicon-bookmark"></div>
  								<div class="li_bottom">.glyphicon .glyphicon-search</div>
  							</div>
  						</li>
  						<li>
  							<div class="row2_li_div" align="center">
  								<div class="glyphicon glyphicon-book"></div>
  								<div class="li_bottom">.glyphicon .glyphicon-book</div>
  							</div>
  						</li>
  						<li>
  							<div class="row2_li_div" align="center">
  								<div class="glyphicon glyphicon-ok"></div>
  								<div class="li_bottom">.glyphicon .glyphicon-ok</div>
  							</div>
  						</li>
  						<li>
  							<div class="row2_li_div" align="center">
  								<div class="glyphicon glyphicon-remove"></div>
  								<div class="li_bottom">.glyphicon .glyphicon-remove</div>
  							</div>
  						</li>
  						<li>
  							<div class="row2_li_div" align="center">
  								<div class="glyphicon glyphicon-remove-circle"></div>
  								<div class="li_bottom">.glyphicon .glyphicon-remove-circle</div>
  							</div>
  						</li>
  						<li>
  							<div class="row2_li_div" align="center">
  								<div class="glyphicon glyphicon-remove-sign"></div>
  								<div class="li_bottom">.glyphicon .glyphicon-remove-sign</div>
  							</div>
  						</li>
  						<li>
  							<div class="row2_li_div" align="center">
  								<div class="glyphicon glyphicon-plus-sign"></div>
  								<div class="li_bottom">.glyphicon .glyphicon-plus-sign</div>
  							</div>
  						</li>
  					</ul>
  					</div>
				</div>
				<div id="row3" class="row_div" align="left">
					<button type="button" class="btn btn-default btn-lg">
						<span class="glyphicon glyphicon-book"></span> Book
					</button>
					<button type="button" class="btn btn-default btn-lg">
						<span class="glyphicon glyphicon-star"></span> Star
					</button>
					<button type="button" class="btn btn-default btn-lg">
						<span class="glyphicon glyphicon-map-marker"></span> Map-marker
					</button>
					<div style="width:200px;margin:10px 0;">
						<button type="button" class="btn btn-default btn-lg btn-block">
							<span class="glyphicon glyphicon-bookmark"></span> BookMark
						</button>
					</div>
				</div>
				<!-- <div id="row4" class="row_div" align="left">
					
				</div> -->
  			</fieldset>
  		</div>
  		<div id="selectDemo" class="content_div">
  			<fieldset>
  				<legend>Select下拉菜单</legend>
  				<div class="row_div" align="left">
  					<!-- <div class="dropdown">
  						
  					</div> -->
  					
  				</div>
  			</fieldset>
  		</div>
  		<div id="buttonGroup" class="content_div">
  			<fieldset>
  				<legend>btn-group</legend>
  				<div class="row_div" align="left">
  					<blockquote>
  						<p>按钮组 btn-group</p>
  					</blockquote>
  					<div>
  						<button class="btn btn-default">left</button>
  						<button class="btn btn-primary">middle</button>
  						<button class="btn btn-success">right</button>
  					</div>
  				</div>
  				<div class="row_div" align="left">
  					<blockquote>
  						<p>按钮工具栏:把一组<code>&lt;div class="btn-group"&gt;</code>组合进一个<code>&lt;div class="btn-toolbar"&gt;</code>做成更复杂的组件。</p>
  					</blockquote>
  					<div class="btn-toolbar">
  						<div class="btn-group">
	  						<button class="btn btn-default">1</button>
	  						<button class="btn btn-default">2</button>
	  						<button class="btn btn-default">3</button>
	  					</div>
	  					<div class="btn-group">
	  						<button class="btn btn-default">4</button>
	  						<button class="btn btn-default">5</button>
	  						<button class="btn btn-default">6</button>
	  					</div>
  					</div>
  				</div>
  				<div class="row_div" align="left">
  					<blockquote>
  						<p>只要给<code>.btn-group</code>加上<code>.btn-group-*</code>，而不是给组中每个按钮都应用大小类。</p>
  					</blockquote>
  					<div class="btn-group btn-group-lg">
  						<button type="button" class="btn btn-default">left</button>
  						<button type="button" class="btn btn-default">middle</button>
  						<button type="button" class="btn btn-default">right</button>
  					</div>
  				</div>
  				<div class="row_div" align="left">
  					<blockquote>
  						<p>想要把下拉菜单混合到一系列按钮中，就把<code>.btn-group</code>放入另一个<code>.btn-group</code>中。</p>
  					</blockquote>
  					<div class="btn-group btn-group-lg">
  						<button type="button" class="btn btn-default">1</button>
  						<button type="button" class="btn btn-default">2</button>
  						<div class="btn-group btn-group-lg">
  							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  								DropDown
  								<span class="caret"></span>
  							</button>
							<ul class="dropdown-menu">
						      <li><a href="#">Dropdown link1</a></li>
						      <li><a href="#">Dropdown link2</a></li>
						    </ul>
  						</div>
  					</div>
  					<div class="btn-group">
					  <button type="button" class="btn btn-default">1</button>
					  <button type="button" class="btn btn-default">2</button>
					
					  <div class="btn-group">
					    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					      Dropdown
					      <span class="caret"></span>
					    </button>
					    <ul class="dropdown-menu">
					      <li><a href="#">Dropdown link1</a></li>
					      <li><a href="#">Dropdown link2</a></li>
					    </ul>
					  </div>
					</div>
  				</div>
  				<div class="row_div" align="left">
  					<blockquote>
  						<p>让一组按钮竖直显示而不是水平显示。<code>.btn-group-vertical</code></p>
  					</blockquote>
  					<div class="btn-group-vertical btn-group-lg">
  						<button type="button" class="btn btn-default">1</button>
  						<button type="button" class="btn btn-default">2</button>
  						<div class="btn-group btn-group-lg">
  							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  								DropDown
  								<span class="caret"></span>
  							</button>
							<ul class="dropdown-menu">
						      <li><a href="#">Dropdown link1</a></li>
						      <li><a href="#">Dropdown link2</a></li>
						    </ul>
  						</div>
  						<button type="button" class="btn btn-default">3</button>
  						<button type="button" class="btn btn-default">4</button>
  						<div class="btn-group btn-group-lg">
  							<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  								DropDown
  								<span class="caret"></span>
  							</button>
							<ul class="dropdown-menu">
						      <li><a href="#">Dropdown link1</a></li>
						      <li><a href="#">Dropdown link2</a></li>
						    </ul>
  						</div>
  					</div>
  					<div class="btn-group-vertical">
					  <button type="button" class="btn btn-default">1</button>
					  <button type="button" class="btn btn-default">2</button>
					
					  <div class="btn-group">
					    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					      Dropdown
					      <span class="caret"></span>
					    </button>
					    <ul class="dropdown-menu">
					      <li><a href="#">Dropdown link1</a></li>
					      <li><a href="#">Dropdown link2</a></li>
					    </ul>
					  </div>
					</div>
  				</div>
  				<div class="row_div" align="left">
  					<div class="btn-group">
  						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  							Action<span class="caret"></span>
  						</button>
  						<ul class="dropdown-menu" role="menu">
  							<li><a href="#">action 1</a></li>
  							<li><a href="#">action 2</a></li>
  							<li><a href="#">action 3</a></li>
  							<li class="divider"></li>
  							<li><a href="#">action 4</a></li>
  						</ul>
  					</div>
  				</div>
  			</fieldset>
  		</div>
  		<div id="formDemo" class="content_div">
  			<fieldset>
  				<legend>login_form</legend>
  				<div class="row_div" align="left">
  					<div align="center" style="height: 400px;border:1px solid #ddd;background: #1abc9c;">
  					<div class="login-form" style="width:400px;border:1px solid #ddd;margin-top:55px;padding:35px 50px 20px 50px;;background: #ddd;">
  						<form class="form-horizontal" role="form" action="index_formDemo.jsp">
  							<div class="form-group">
  								<div class="col-sm-10">
  									<input type="text" class="form-control" id="login_name" placeholder="请输入用户名">
  								</div>
  								<label class="glyphicon glyphicon-user col-sm-1 control-label" for="login_name"></label>
  							</div>
  							<div class="form-group">
  								<div class="col-sm-10">
  									<input type="password" class="form-control" id="login_password" placeholder="请输入密码">
  								</div>
  								<label class="glyphicon glyphicon-lock col-sm-1 control-label" for="login_password"></label>
  							</div>
  							<div class="form-group">
  								<div class="col-sm-4">
  									<div class="checkbox">
  										<input type="checkbox"><label class="text-warning">记住我</label>
  									</div>
  								</div>
  							</div>
  							<div class="form-group">
  								<div class="col-sm-offset-2" align="left">
  									<button type="submit" class="btn btn-primary">登 录</button>&nbsp;&nbsp;&nbsp;&nbsp;
  									<button type="reset" class="btn btn-primary">重 置</button>
  								</div>
  							</div>
  							<div class="form-group">
	  							<div class="col-sm-offset-9" align="right" style="position:relative ;margin-top:-35px;border:0px solid red;">
	  								<a href="http://www.baidu.com" target="_block">忘记密码?</a>
	  							</div>
  							</div>
  						</form>
  					</div>
  					</div>
  				</div>
  			</fieldset>
  		</div>
  	</div>
  	<div id="bottom">
  		<!-- <input type="text"><label><button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-search"></span></button></label> -->
  		<div class="control-group">
            <label class="control-label" for="appendedPrependedInput">后置加按钮</label>
            <div class="controls">
              <div class="input-append">
                <input class="span2" id="appendedPrependedInput" size="16" type="text"><button class="btn" type="button">Go!</button>
              </div>
            </div>
          </div>
          <form class="well form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>
  	</div>
  </div>
  </body>
</html>
